<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>视频详情</title>
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2384888_ojge9md3tr.css
    ">
    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="../css/online.css">
</head>

<body>
    <!-- 导航菜单 -->
    <nav>
        <div class="main">
            <img src="../img/public/logo.png" alt="" class="logo">
            <ul>
                <li><a href="../index.html">首页</a></li>
                <li class="check"><a href="javascript:;">同步课程</a></li>
                <li><a href="javascript:;">精品课程</a></li>
            </ul>
            <div class="search">
                <div class="left">课程<i class="iconfont icon-down"></i>
                </div>
                <input type="text" placeholder="搜索感兴趣的内容">
                <img src="../img/public/search.png" alt="">
            </div>
            <div class="login">
                <a href="javascript:;">登陆</a>
                /
                <a href="javascript:;">注册</a>
            </div>
            <div class="user">
                <img src="../img/login/user.png" alt="">
                <div class="userlist">
                    <ul>
                        <li>我是用户名</li>
                        <li>课程中心</li>
                        <li>订单中心</li>
                        <li>资金管理</li>
                        <li>个人中心</li>
                        <li class="out">退出登陆</li>
                    </ul>
                </div>
            </div>
        </div>
    </nav>

    <!-- 主体内容 -->
    <main>
        <div class="row">
            <div class="left">热门城市</div>
            <div class="right">
                <ul id="areas" typename="area_name">
                    <!--  <li><a>不限</a></li>
                    <li><a>北京</a></li>
                    <li><a>上海</a></li>
                    <li><a>江苏</a></li>
                    <li><a>济南</a></li>
                    <li><a>河南</a></li>
                    <li><a>天津</a></li>
                    <li><a>沈阳</a></li>
                    <li><a>石家庄</a></li> -->
                </ul>
            </div>
        </div>
        <div class="row">
            <div class="left">按年级选择</div>
            <div class="right">
                <ul id="grades" typename="grade_name">
                    <!-- <li><a>不限</a></li>
                    <li><a>一年级</a></li>
                    <li><a>二年级</a></li>
                    <li><a>三年级</a></li>
                    <li><a>四年级</a></li>
                    <li><a>五年级</a></li>
                    <li><a>六年级</a></li>
                    <li><a>初一</a></li>
                    <li><a>初二</a></li>
                    <li><a>初三</a></li>
                    <li><a>高一</a></li>
                    <li><a>高二</a></li>
                    <li><a>高三</a></li> -->
                </ul>
            </div>
        </div>
        <div class="row">
            <div class="left">按学科选择</div>
            <div class="right">
                <ul id="subjects" typename="subject_name">
                    <!--  <li><a>不限</a></li>
                    <li><a>语文</a></li>
                    <li><a>数学</a></li>
                    <li><a>英语</a></li>
                    <li><a>生物</a></li>
                    <li><a>历史</a></li>
                    <li><a>政治</a></li>
                    <li><a>物理</a></li> -->
                </ul>
            </div>
        </div>
        <div class="row">
            <div class="left">按类别选择</div>
            <div class="right">
                <ul id="cates" typename="category_name">
                    <!-- <li><a>不限</a></li>
                    <li><a class="active">期中</a></li>
                    <li><a>期末</a></li>
                    <li><a>小升初</a></li> -->
                </ul>
            </div>
        </div>
        <div class="lesson">
            <ul>
                <!--  <li>
                    <div class="top">
                        <img src="../img/online/banner1-1.png" alt="" class="m">
                        <p>学科：英语</p>
                    </div>
                    <div class="bottom">
                        <div class="left">
                            <span>人教版语文第一节课程内容讲解</span>
                            <span class="time">地区：北京</span>
                        </div>
                        <div class="right">免费学习</div>
                    </div>
                </li> -->
            </ul>
        </div>

        <div class="pageNum">
            <button>上一页</button>
            <ul>
                <!-- <li class="active">1</li>
                <li>2</li>
                <li>3</li> -->
            </ul>
            <button class="active">下一页</button>
        </div>
    </main>

    <footer>
        <div class="cont">
            <div class="main">
                <p>
                    首页 | 关于我们 | 加入我们 | 合作专区 | 联系我们 | AI开放平台 | 意见反馈 | 漏洞提交 | 隐私政策 | 版权声明 | 反盗链声明 | 网上有害信息举报 | 备案公示 | 营业执照
                    | 教师资格证公示

                </p>
                <p>
                    京ICP备 13030888号 Copyright © 2014-2019 行者信息科技（北京）有限公司 | 地址：北京市新华区马当路388号C座 | 电话：010-66666666 | 京公网安备
                    01010102002533号
                </p>
                <p>
                    京网文〔2018〕4086-308号 | 网络文化经营许可证：沪网文[2018]4086-308号 | 增值电信业务经营许可证：京B2-20150021 |
                    食品经营许可证：JY13101140088888
                </p>
                <p>医疗器械经营许可证：京嘉食药监械经营许20188008号 | 互联网药品信息服务资格证书：(京)-经营性-2018-0011 |</p>
            </div>
        </div>
    </footer>



    <!-- <script src="../js/ujiuye.js"></script> -->
</body>

</html>
<script src="../utils/jquery.min.js"></script>
<script src="../utils/ajax.js"></script>
<script>


    /* 
    getareas() 
    async function getareas(){
 
         // 发送ajax请求
         let [err,results]=await ajax({
             url:api_url+"/areas"
         })
          // 错误拦截
          if (err) {
             alert("地区数据请求失败")
             return
         }
 
         if (results.status != 200) {
             alert(results.msg)
             return
         }
 
 
         // 拼接字符串
         let str=`<li><a>不限</a></li>`
 
         results.results.forEach(value=>{
             str+=`<li><a>${value}</a></li>`
         })    
 
         // 渲染页面
         $("#areas").html(str)
         
     } */

    // 筛选的渲染
    gettypes("/areas", "地区", "#areas")
    gettypes("/grades", "年级", "#grades")
    gettypes("/subjects", "学科", "#subjects")
    gettypes("/cates", "考试类别", "#cates")
    async function gettypes(url, types, parent) {

        // 发送ajax请求
        let [err, results] = await ajax({
            url: api_url + url
        })
        // 错误拦截
        if (err) {
            alert(types + "数据请求失败")
            return
        }

        if (results.status != 200) {
            alert(results.msg)
            return
        }


        // 拼接字符串
        let str = `<li><a class="active">不限</a></li>`

        results.results.forEach(value => {
            str += `<li><a>${value}</a></li>`
        })

        // 渲染页面
        $(parent).html(str)

    }



    // 列表页列表渲染
    /*  getcourselist()
     async function getcourselist( category_name,subject_name,area_name ,grade_name ,page,size ){
 
         let [err,results]=await ajax({
             url:api_url+"/courselist",
             data:{
                 category_name:category_name,// 考试类别
                 subject_name:subject_name,//学科
                 area_name:area_name,//地区
                 grade_name:grade_name,//年级
                 page:page,
                 size:size
             }
         })
 
         console.log(err,results);
     } */


    /* getcourselist()
    async function getcourselist( category_name,subject_name,area_name ,grade_name ,page,size ){

        let [err,results]=await ajax({
            url:api_url+"/courselist",
            data:{
                category_name,// 考试类别
                subject_name,//学科
                area_name,//地区
                grade_name,//年级
                page,
                size
            }
        })

        console.log(err,results);
    } */


    /* getcourselist("期中")
    getcourselist( "数学")
    async function getcourselist( category_name,subject_name,area_name ,grade_name ,page,size ){

        let [err,results]=await ajax({
            url:api_url+"/courselist",
            data:{
                category_name,// 考试类别
                subject_name,//学科
                area_name,//地区
                grade_name,//年级
                page,
                size
            }
        })

        console.log(err,results);
    } */


    getcourselist()
    // getcourselist({ subject_name:"数学"})
    async function getcourselist({ category_name, subject_name, area_name, grade_name, page, size } = {}) {

        let [err, results] = await ajax({
            url: api_url + "/courselist",
            data: {
                category_name,// 考试类别
                subject_name,//学科
                area_name,//地区
                grade_name,//年级
                page,
                size
            }
        })
        // console.log(err, results);
        // 错误拦截
        if (err) {
            alert(types + "数据请求失败")
            return
        }

        if (results.status != 200) {
            alert(results.msg)
            return
        }


        // 渲染列表
        let str = ``
        results.results.data.forEach(value => {
            str += `<li>
                    <a href="./videoDetail.html?cid=${value.cid}">
                        <div class="top">
                            <img src="${value.image_src}" alt="" class="m">
                            <p>学科：${value.subject_name}</p>
                        </div>
                        <div class="bottom">
                            <div class="left">
                                <span>${value.title}</span>
                                <span class="time">地区：${value.area_name}</span>
                            </div>
                            <div class="right">${value.price == 0 ? "免费学习" : value.price + "元"}</div>
                        </div>    
                    </a>
                </li>`
        })
        $(".lesson ul").html(str)


        // 渲染页码
        let str1 = ``
        for (let i = 0; i < results.results.pages; i++) {
            // str1+=`<li ${i==0?'class="active"':''}>${i+1}</li>`
            str1 += `<li ${i == results.results.page - 1 ? 'class="active"' : ''}>${i + 1}</li>`
        }

        $(".pageNum ul").html(str1)


        if (cldata.page >= results.results.pages) {

            $(".pageNum button:eq(1)").prop("disabled", true).removeClass("active")

        } else {
            $(".pageNum button:eq(1)").prop("disabled", false).addClass("active")
        }

        if (cldata.page <=1) {

            $(".pageNum button:eq(0)").prop("disabled", true).removeClass("active")

        } else {
            $(".pageNum button:eq(0)").prop("disabled", false).addClass("active")
        }

    }



    // 点击筛选

    /* $(".row").on("click","li",function(){
        console.log($(this).text());

        getcourselist({area_name:$(this).text()})
    }) */

    /* $(".row").on("click", "li", function () {
        // let value=$(this).text()
        let value = $(this).text() == "不限" ? undefined : $(this).text()
        let key = $(this).parent().attr("typename")

        getcourselist({  [ key]: value })
    })*/

    let cldata = { page: 1 }
    $(".row").on("click", "li", function () {
        cldata.page = 1

        let value = $(this).text() == "不限" ? undefined : $(this).text()
        let key = $(this).parent().attr("typename")

        cldata[key] = value

        getcourselist(cldata)
    })



    // 点击页码
    $(".pageNum").on("click", "li", function () {
        cldata.page = $(this).text()

        getcourselist(cldata)
    })



    // 上一页
    $(".pageNum button:eq(0)").on("click", function () {
        cldata.page--
        getcourselist(cldata)
    })


    // 下一页
    $(".pageNum button:eq(1)").on("click", function () {
        cldata.page++
        getcourselist(cldata)
    })

</script>